<template>
  <div class="bottomDiv">
    <!-- 出气量/管存选择按钮   -->
    <div style="background: rgba(234, 221, 221, 0.71); border-radius: 20px">
      <el-row>
        <el-col :span="12">
          <div :class="[
            'notSelectedOutgasBtn',
            selectBtn === 'outgas' ? 'selectedOutgasBtn' : ''
          ]" @click="selectBtnFunc('outgas')">
            <span class="outgasBtnText">出气</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div :class="[
            'notSelectedOutgasBtn',
            selectBtn === 'inpipe' ? 'selectedOutgasBtn' : ''
          ]" @click="selectBtnFunc('inpipe')">
            <span class="outgasBtnText">管存</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 出气量预测曲线图 -->
    <div id="main" style="width: 110vw; height: 200px; margin-left: -10vw;" />

    <div class="block sliderDiv">
      <el-slider v-model="value" :max="106" :show-tooltip="false" :step="step" :marks="marks"
        @change="handleSliderChange" @input="handleSliderInput" />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { cityData, pipeSystemData, userData } from "@/utils/LatData";
import {
  getAreaIngasDataById,
  getAreaOutgasDataById,
  getCityOutgasDataById,
  getPipeIngasDataById,
  getPipeOutgasDataById
} from "@/api/dashboard";
import store from "@/store/index";

const mapAreas = ["北部", "东部", "南部", "西部", "中部"];

export default {
  props: {
    targetId: {
      type: String,
      default: "0"
    },
    area: {
      type: String,
      default: "0"
    },
    selectPipeLineId: {
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      selectBtn: "outgas",
      // 新增字段
      chart: null,
      options: {},
      value: 16,
      defaultTime: "",
      curTime: "",
      curTimeFormat: "",
      step: 2,
      isDayLines: false,
      xIndex: 4,
      cons: {
        minute: "minute",
        day: "day"
      },
      outgasDataMap: new Map(),
      ingasDataMap: new Map(),
      curDataMap: {},
      prefix: "预测出气量",
      unit: "万方",
      maxValue: 500,
      minValue: 300,
      targetValue: 400,
      yScaleMinValue: 0,
      yScaleMaxValue: 30000,
      width: 1,
      isInitDraw: false,
      storeOutgasTag: new Map(),
      storeIngasTag: new Map(),
      marks: {
        0: {
          style: {
            color: "#6DA3F9"
          },
          label: "-1小时"
        },
        16: {
          style: {
            color: "#6DA3F9"
          },
          label: "现在"
        },
        32: {
          style: {
            color: "#6DA3F9"
          },
          label: "+2小时"
        },

        76: {
          style: {
            color: "#FF9100"
          },
          label: "+24小时"
        },
        90: {
          style: {
            color: "#FF9100"
          },
          label: "+7天"
        },
        106: {
          style: {
            color: "#FF9100",
            width: "36px",
            marginLeft: "-3px"
          },
          label: "+15天"
        }
      },
      adcode: localStorage.getItem("adcode")
    };
  },
  computed: {
    valueId() {
      return this.targetId || localStorage.getItem("id");
    }
  },
  watch: {
    isDayLines: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal === oldVal) {
          return;
        }
        this.value = 16
        this.watchDataChangeRerenderChart();
      }
    },
    // area: {
    //   deep: true,
    //   handler(newVal, oldVal) {
    //     console.log(newVal, "阿斯顿撒打算");
    //     if (newVal === oldVal) {
    //       return;
    //     }
    //     this.watchDataChangeRerenderChart();
    //   }
    // },
    selectBtn: {
      deep: true,
      handler(newVal, oldVal) {
        this.value = 16;
        this.setLinesData();
        this.watchDataChangeRerenderChart();
        this.yScaleMaxValue = 10;


        console.log(this.yScaleMaxValue, '最休息休息')
        // console.log('管存')
      }
    },
    valueId: {
      deep: true,
      handler(newVal, oldVal) {
        console.log(
          "切换数据3：" +
          this.selectBtn +
          "   " +
          this.valueId +
          "         " +
          this.isDayLines
        );
        this.value = 16
        this.watchDataChangeRerenderChart();
      }
    },
    isInitDraw: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal && newVal) {
          this.curTimeFormat = this.getFormatTime(this.curTime);
          this.curDataMap = this.outgasDataMap.get(this.valueId);
          this.$store.dispatch("app/setCurTime", this.curTimeFormat);
          this.getGasData().then(() => {
            this.value = 16;
            this.initOptions();
            // console.log(this.curDataMap, '曲线数据')
            this.setYScaleValue();
            this.initChart();
            this.chart.dispatchAction({
              type: "showTip",
              seriesIndex: 0, // 针对series下第几个数据
              dataIndex: 4 // 第几个数据
            });
          });
        }
      }
    },
    adcode: {
      deep: true,
      handler(newVal, oldVal) {
        if (newVal !== oldVal && newVal) {
          this.initOutgasDataMock();
          console.log("adcode发生了改变");
        }
      }
    },
    "$store.state.app.outGasData": {
      deep: true,
      handler() {
        this.initOutgasData();
      }
    },
    "$store.state.app.inGasData": {
      deep: true,
      handler() {
        this.initIngasData();
      }
    },
    selectPipeLineId: {
      deep: true,
      handler(_newVal, _oldVal) {
        this.value = 16
        this.watchDataChangeRerenderChart();
      }
    },
    area: {
      deep: true,
      handler(_newVal, _oldVal) {
        const isAreaChange = true;
        this.watchDataChangeRerenderChart(isAreaChange);
      }
    }
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener("resize", this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
    }
  },
  mounted() {
    window.addEventListener("resize", this.resizeChart);
    this.initOutgasData();
    this.initOptions();
    this.initIngasData();
    this.initChart();
    // this.curDataMap = this.outgasDataMap.get('10')
  },
  methods: {
    handleSliderChange(e) {
      this.value = e;
      this.initOptions();
      this.initChart();
    },
    getFormatTime(date, type = "time") {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date
        .getDate()
        .toString()
        .padStart(2, "0");
      const hour = date
        .getHours()
        .toString()
        .padStart(2, "0");
      const minute = date
        .getMinutes()
        .toString()
        .padStart(2, "0");
      const second = date
        .getSeconds()
        .toString()
        .padStart(2, "0");
      let formattedDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      if (type === "date") {
        formattedDate = `${year}-${month}-${day}`;
      }
      console.log(year, month, day, hour, minute, second, formattedDate, '66666666666666666666')
      return formattedDate;
    },
    selectBtnFunc(value) {
      this.selectBtn = value;
    },
    setLinesData() {
      let data = null;
      if (this.selectBtn === "outgas") {
        this.prefix = "预测出气量";
        this.unit = "万方";
        data = this.outgasDataMap.get(this.valueId);
      } else if (this.selectBtn === "inpipe") {
        this.prefix = "预测管存量";
        this.unit = "亿方";
        data = this.ingasDataMap.get(this.valueId);
        if (!data) {
          data = this.ingasDataMap.get("23");
        }
      }
      console.log(
        "setLinesData outgasDataMap data数据 ",
        this.valueId,
        this.outgasDataMap.get(this.valueId)
      );
      console.log(
        "setLinesData ingasDataMap data数据 ",
        this.valueId,
        this.ingasDataMap.get(this.valueId)
      );

    },
    setXY() {
      if (this.isDayLines) {
        this.options.xAxis.data = this.curDataMap.dayX;
        this.options.series[0].data = this.curDataMap.dayY;
      } else {
        this.options.xAxis.data = this.curDataMap.hourX;
        this.options.series[0].data = this.curDataMap.hourY;
      }
    },
    setRiskValue() {
      if (this.selectBtn === "outgas") {
        this.options.series[0].markLine.lineStyle.width = 0;
        this.options.series[0].markLine.label.show = false;
        this.options.visualMap.pieces[0].color = "#008BFF";
        this.options.visualMap.pieces[1].color = "#008BFF";
        return;
      }
      this.options.series[0].markLine.lineStyle.width = 1;
      this.options.series[0].markLine.label.show = true;
      this.options.visualMap.pieces[0].color = "#008BFF";
      this.options.visualMap.pieces[1].color = "#008BFF";
      if (this.isDayLines) {
        this.maxValue = parseFloat(this.curDataMap.dayMax);
        this.minValue = parseFloat(this.curDataMap.dayMin);
        this.targetValue = this.curDataMap.dayTarget;
      } else {
        this.maxValue = parseFloat(this.curDataMap.hourMax);
        this.minValue = parseFloat(this.curDataMap.hourMin);
        this.targetValue = this.curDataMap.hourTarget;
      }
      this.options.series[0].markLine.data[0].yAxis = this.maxValue;
      this.options.series[0].markLine.data[1].yAxis = this.minValue;
      this.options.series[0].markLine.data[2].yAxis = this.targetValue;
      this.options.series[0].markLine.data[2].yAxis = this.targetValue;
      this.options.visualMap.pieces[0].min = this.maxValue;
      this.options.visualMap.pieces[1].max = this.minValue;

      // console.log(this.options.visualMap.pieces[0].min);
      // console.log(this.options.visualMap.pieces[1].max);
    },
    watchDataChangeRerenderChart() {
      this.getGasData().then(() => {
        this.options = {};
        this.initOptions();
        this.setXY();
        // this.setRiskValue();
        this.setYScaleValue();
        this.initChart();
      });
    },
    getGasData() {
      return new Promise((resolve, reject) => {
        let arrArea = ["北部", "东部", "南部", "西部", "中部"];
        if (this.selectBtn === "outgas") {
          if (arrArea.indexOf(localStorage.getItem("adcode")) != "-1") {
            getAreaOutgasDataById({
              dispatcherId: localStorage.getItem("id")
            })
              .then(res => {
                this.setLinesOutgasData(res.data, this.adcode);

                resolve();
              })
              .catch(e => {
                reject(e);
                res = err;
              });
          } else {
            getCityOutgasDataById({
              cityId: localStorage.getItem("adcode") || "",
              pipelineId: localStorage.getItem("pipelineId") || "",
              userId: localStorage.getItem("userId") || "",
              dispatcherId: localStorage.getItem("id")
            })
              .then(res => {
                this.setLinesOutgasData(res.data, this.adcode);
                resolve();
              })
              .catch(e => {
                reject(e);
                res = err;
              });
          }
        }
        if (this.selectPipeLineId !== "0") {
          const params = {
            dispatcherId: this.valueId,
            pipelineId: this.selectPipeLineId
          };
          getPipeOutgasDataById(params).then(res => {
            // console.log(res.data, '重点城市数据')
            this.setLinesOutgasData(res.data, this.adcode);
            resolve();
          });
        }
        if (this.selectBtn === "inpipe") {
          if (arrArea.indexOf(localStorage.getItem("adcode")) != "-1") {
            getAreaIngasDataById({
              dispatcherId: localStorage.getItem("id")
            })
              .then(res => {
                this.setLinesIngasData(res.data, this.adcode);
                resolve();
              })
              .catch(e => {
                reject(e);
                res = err;
              });
          } else {
            getPipeIngasDataById({
              cityId: localStorage.getItem("adcode") || "",
              pipelineId: localStorage.getItem("pipelineId") || "",
              userId: localStorage.getItem("userId") || "",
              dispatcherId: localStorage.getItem("id")
            })
              .then(res => {
                this.setLinesIngasData(res.data, this.adcode);
                resolve();
              })
              .catch(e => {
                reject(e);
                res = err;
              });
          }
        }
      });
    },

    handleSliderInput() {
      console.log('-----------------------------')
      if (!this.isInitDraw) {
        return;
      }
      console.log('=============================')
      if (this.value <= 16) {
        this.step = 4;
      } else if (this.value <= 32) {
        this.step = 2;
      } else if (this.value <= 76) {
        this.step = 1;
      } else if (this.value <= 106) {
        this.step = 2;
      }

      for (const num of [0, 16, 32, 76, 90, 106]) {
        this.marks[num].style.color = "#FF9100";
        this.marks[num].style.fontWeight = "normal";
      }
      if ([0, 16, 32, 76, 90, 106].indexOf(this.value) > -1) {
        this.marks[this.value].style.color = "#000";
        this.marks[this.value].style.fontWeight = "bold";
      }

      if (this.value <= 16) {
        const minute = ((this.value - 16) / 4) * 15;
        this.adjustCurTime(this.cons.minute, minute);
      } else if (this.value <= 32) {
        const minute = ((this.value - 16) / 2) * 15;
        this.adjustCurTime(this.cons.minute, minute);
      } else if (this.value <= 76) {
        const minute = (this.value - 32) * 2 * 15 + 120;
        this.adjustCurTime(this.cons.minute, minute);
      } else {
        const day = (this.value - 76) / 2;
        this.adjustCurTime(this.cons.day, day);
      }
      this.isDayLines = this.value > 76 ? true : false;

      let start = 0;
      let end = 0;
      let index = 0;
      if (this.value <= 32) {
        start = 0;
        end = 12;
        index = this.value <= 16 ? this.value / 4 : this.value / 2 - 4;
      } else if (this.value <= 72) {
        start = 12;
        end = this.value * 2 - 44;
        index = this.value * 2 - 52;
      } else if (this.value <= 76) {
        start = 12;
        end = 100;
        index = this.value * 2 - 52;
      } else if (this.value <= 100) {
        start = 0;
        end = 15;
        index = (this.value - 76) / 2;
      }

      this.chart.dispatchAction({
        type: "dataZoom",
        dataZoomIndex: 0,
        startValue: start,
        endValue: end
      });
      // console.log(index,'input下标')
      this.chart.dispatchAction({
        type: "showTip",
        seriesIndex: 0, // 针对series下第几个数据
        dataIndex: index // 第几个数据
      });
      this.xIndex = index;
      this.$store.dispatch("app/setCurTime", this.curTimeFormat);
    },
    adjustCurTime(type, time) {
      console.log(time, type, this.cons, "78979879789798");
      if (type === this.cons.minute) {
        const date = new Date(this.defaultTime.valueOf());
        if (this.defaultTime) {
          date.setMinutes(this.defaultTime.getMinutes() + time);
          this.curTime = new Date(date.valueOf());
          this.curTimeFormat = this.getFormatTime(this.curTime);
          console.log(this.curTime, this.curTimeFormat, 'sssssssssssssssssssssss');
        }
      } else if (type === this.cons.day) {
        const date = new Date(this.defaultTime.valueOf());
        if (this.defaultTime) {
          date.setDate(this.defaultTime.getDate() + time);
          this.curTime = new Date(date.valueOf());
          this.curTimeFormat = this.getFormatTime(this.curTime, "date");
          console.log(this.curTime, this.curTimeFormat, 'ddddddddddddddddddddd');
        }
      }
    },
    initOutgasDataMock() {
      const params = {
        cityId: localStorage.getItem("adcode"),
        dispatcherId: localStorage.getItem("id")
      };
      getPipeOutgasDataById(params).then(res => {
        // console.log(res.data, '重点城市数据')
        this.setLinesOutgasData(res.data, this.adcode);
        this.initChart();
      });
    },

    initOutgasData() {
      // 初始化大区出气量数据
      const bool =
        this.storeOutgasTag.has("23") && this.storeOutgasTag.get("23");
      // console.log(store.state.app.outGasData.get('23'), '区域数据')
      getPipeOutgasDataById({
        dispatcherId: this.valueId,
        pipelineId: Number(this.selectPipeLineId) || "23"
      }).then(res => {
        console.log("getPipeOutgasDataById ---> res数据", res.data);
        this.setLinesOutgasData(res.data, "10");
      });

      if (!bool && store.state.app.outGasData.has("23")) {
        const data = store.state.app.outGasData.get("23");
        this.setLinesOutgasData(data, "23");
        this.storeOutgasTag.set("23", true);
        // 进入页面后的初始化操作
        this.curTime = new Date(data.oneDay.ycList[0].time);
        this.defaultTime = new Date(data.oneDay.ycList[0].time);
        console.log(this.curTime, this.defaultTime, 'initOutgasData')
        this.isInitDraw = true;
      }

      // 初始化管道系统出气量数据
      for (const pipeSyc of pipeSystemData) {
        const bool =
          this.storeOutgasTag.has(pipeSyc.id) &&
          this.storeOutgasTag.get(pipeSyc.id);
        if (!bool && store.state.app.outGasData.has(pipeSyc.id)) {
          const data = store.state.app.outGasData.get(pipeSyc.id);
          this.setLinesOutgasData(data, pipeSyc.id);
          this.storeOutgasTag.set(pipeSyc.id, true);
        }
      }

      // 初始化城市出气量数据
      for (const city of cityData[this.valueId]) {
        const bool =
          this.storeOutgasTag.has(city.id) && this.storeOutgasTag.get(city.id);
        if (!bool && store.state.app.outGasData.has(city.id)) {
          const data = store.state.app.outGasData.get(city.id);
          this.setLinesOutgasData(data, city.id);
          this.storeOutgasTag.set(city.id, true);
        }
      }

      // 初始化用户出气量数据
      for (const user of userData[this.valueId]) {
        const bool =
          this.storeOutgasTag.has(user.id) && this.storeOutgasTag.get(user.id);
        if (!bool && store.state.app.outGasData.has(user.id)) {
          const data = store.state.app.outGasData.get(user.id);
          this.setLinesOutgasData(data, user.id);
          this.storeOutgasTag.set(user.id, true);
        }
      }
    },
    initIngasData() {
      // 初始化大区管存量数据
      const bool = this.storeIngasTag.has("23") && this.storeIngasTag.get("23");
      if (!bool && store.state.app.inGasData.has("23")) {
        const data = store.state.app.inGasData.get("23");
        this.setLinesIngasData(data, "23");
        this.storeIngasTag.set("23", true);
      }

      // 初始化管道系统管存量数据
      for (const pipeSyc of pipeSystemData) {
        const id = pipeSyc.id;
        const bool = this.storeIngasTag.has(id) && this.storeIngasTag.get(id);
        if (!bool && store.state.app.inGasData.has(id)) {
          const data = store.state.app.inGasData.get(id);
          this.setLinesIngasData(data, id);
          this.storeIngasTag.set(id, true);
        }
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("main"));
      this.chart.setOption(this.options);
    },
    initOptions() {
      const ctx = this;
      ctx.options = {
        tooltip: {
          trigger: "axis",
          textStyle: {
            color: "#333" // 设置字体颜色为黑色
          },
          formatter: params => {
            let currentData = 0;
            let time = this.curTimeFormat;
            if (!this.isDayLines) {
              if (this.curDataMap) {
                currentData = this.curDataMap.hourY[params[0].dataIndex];
                time = time.slice(0, time.length - 3);
                time = this.curDataMap.hourX[params[0].dataIndex];
              }
            } else {
              currentData = this.curDataMap.dayY[params[0].dataIndex];
              time = this.curDataMap.dayX[params[0].dataIndex];
            }
            // currentData = parseFloat(parseFloat(currentData).toFixed(5))
            return `${time}<br/>${this.prefix}: ${currentData} ${this.unit}`;
          },
          triggerOn: "mousemove",
          show: true,
          confine: true,
          fontSize: 8,
          position: "inside",
          backgroundColor: "#97bdf9",
          padding: 8,
          align: "left",
          lineHeight: 10,
          offset: [-10, -20]
        },
        grid: {
          top: "16px",
          bottom: "16px",
          containLabel: true
        },
        xAxis: {
          show: true,
          type: "category",
          data: this.curDataMap.hourX,
          boundaryGap: false,
          silent: true,
          axisLine: { show: false }, // 隐藏 x 轴线
          axisTick: { show: false }, // 隐藏刻度线
          axisLabel: {
            show: true,
            textStyle: {
              color: function (value, index) {
                // console.log(ctx.options.xAxis.data[ctx.xIndex - 1])
                // console.log(value)
                return value === ctx.options.xAxis.data[ctx.xIndex - 1] ? '#32AAFF' : '#000'
                // return "#000";
              }
            }
            // interval: 0
          },
          axisPointer: {
            show: true,
            snap: true,
            lineStyle: {
              color: "#32AAFF",
              type: "dashed"
            }
          }
        },
        yAxis: {
          show: true,
          type: "value",
          axisLine: { show: false },
          axisTick: { show: false },
          boundaryGap: false,
          min: this.yScaleMinValue,
          max: this.yScaleMaxValue,
          minInterval: 100,
          splitArea: {
            show: true,
            areaStyle: {
              color: "#FAFAFA"
            }
          },
          axisLabel: { show: false }, // 隐藏刻度标签
          splitLine: { show: false } // 隐藏网格线
        },
        visualMap: {
          type: "piecewise",
          show: false,
          dimension: 1,
          realtime: true,
          pieces: [
            {
              min: this.maxValue,
              color: "#008BFF"
            },
            {
              max: this.minValue,
              color: "#008BFF"
            }
          ],
          outOfRange: {
            color: "#008BFF"
          },
          showLegend: false
        },
        silent: true,
        series: [
          {
            data: this.curDataMap.hourY,
            type: "line",
            smooth: true,
            itemStyle: {
              color: "rgba(0, 150, 255, 1)",
              areaStyle: {
                color: "#000"
              }
            },
            emphasis: {
              // 添加 emphasis 配置
              itemStyle: {
                borderColor: "rgba(0, 150, 255, 1)", // 选中时的描边颜色
                borderWidth: 4 // 选中时的描边宽度
              }
            },
            markLine: {
              // silent: true,
              symbol: "none",
              label: {
                show: false,
                position: "middle",
                formatter: "{b}{c}"
              },
              lineStyle: {
                color: "#c1c1c1",
                type: "solid",
                width: 1
              }
            }
          }
        ],
        dataZoom: [
          {
            type: "inside", // 修改为内置缩放控件
            xAxisIndex: 0, // 绑定到第一个 x 轴
            startValue: 0,
            endValue: this.value,
            zoomLock: false, // 禁止缩放
            moveOnMouseMove: false, // 禁止鼠标移动时滚动
            handleSize: "0%", // 隐藏缩放控件
            bottom: 0, // 移动到底部
            showDataShadow: false,
            borderColor: "none",
            borderWidth: 1,
            backgroundColor: "#F8F8F8" // 背景色
          }
        ]
      };
      console.log(this.curDataMap.hourX, this.options, '最大值')
      // console.log(ctx.options)
    },
    setYScaleValue() {
      let min = parseFloat(this.options.series[0].data[0]);
      let max = parseFloat(this.options.series[0].data[0]);
      for (const dat of this.options.series[0].data) {
        const data = parseFloat(dat);
        if (data > max) {
          max = data;
        }
        if (data < min) {
          min = data;
        }
      }
      if (this.selectBtn !== "outgas") {
        max = this.maxValue > max ? 10 : max;
        min = this.minValue < min ? this.minValue : min;
      }
      const maxOffset = max / 10;
      const minOffset = min / 10;

      this.yScaleMaxValue = max + maxOffset;
      this.yScaleMinValue = min - minOffset;
      this.options.yAxis.max = this.yScaleMaxValue;
      this.options.yAxis.min = this.yScaleMinValue;
      // /* console.log("max:", this.options.yAxis.max);
      // console.log("min:", this.options.yAxis.min);
      // console.log("yScaleMaxValue:", max);
      // console.log("yScaleMinValue:", min); */
    },
    setLinesOutgasData(data, id) {
      if (!data) {
        return;
      }

      console.log(id, "id");
      // 初始化城市出气量数据
      console.log(data, 'data数据')
      const hourList = [].concat(
        data.oneDay.accumulativeList,
        data.oneDay.ycList
      )
      const hourXData = [];
      const hourYData = [];
      for (const val of hourList) {
        hourXData.push(val.time.slice(10, 16));
        hourYData.push(val.value);
      }
      const dayList = data.fifteenDay.resultList;
      const dayXData = [];
      const dayYData = [];
      for (const val of dayList) {
        dayXData.push(val.time.slice(5, 10).replace("-", "."));
        dayYData.push(val.value);
        hourXData.push(val.time.slice(5, 10).replace("-", "."));
        hourYData.push(val.value)
      }
      // const hourList=
      this.outgasDataMap.set(id, {
        hourX: hourXData,
        hourY: hourYData,
        dayX: dayXData,
        dayY: dayYData
      });

      this.curDataMap = {
        hourX: hourXData,
        hourY: hourYData,
        dayX: dayXData,
        dayY: dayYData
      }
      this.yScaleMaxValue = Math.max(...hourYData);
      console.log(hourXData, dayXData, '最新值出气')
    },
    setLinesIngasData(data, id) {
      if (!data) {
        return;
      }
      // 初始化城市出气量数据
      const hourList = [].concat(
        data.oneDay.accumulativeList,
        data.oneDay.ycList
      );
      const hourXData = [];
      const hourYData = [];
      for (const val of hourList) {
        hourXData.push(val.time.slice(10, 16));
        hourYData.push(val.value);
      }
      const dayList = data.fifteenDay.resultList;
      const dayXData = [];
      const dayYData = [];
      for (const val of dayList) {
        dayXData.push(val.time.slice(5, 10).replace("-", "."));
        dayYData.push(val.value);
      }
      this.ingasDataMap.set(id, {
        hourX: hourXData,
        hourY: hourYData,
        dayX: dayXData,
        dayY: dayYData,
        hourMax: data.oneDay.maxPipeStorage,
        hourMin: data.oneDay.minPipeStorage,
        hourTarget: data.oneDay.targetPipeStorage,
        dayMax: data.fifteenDay.maxPipeStorage,
        dayMin: data.fifteenDay.minPipeStorage,
        dayTarget: data.fifteenDay.targetPipeStorage
      });

      this.curDataMap = {
        hourX: hourXData,
        hourY: hourYData,
        dayX: dayXData,
        dayY: dayYData,
        hourMax: data.oneDay.maxPipeStorage,
        hourMin: data.oneDay.minPipeStorage,
        hourTarget: data.oneDay.targetPipeStorage,
        dayMax: data.fifteenDay.maxPipeStorage,
        dayMin: data.fifteenDay.minPipeStorage,
        dayTarget: data.fifteenDay.targetPipeStorage

      }
      // console.log(Math.max(...hourYData), '最新值')
    },
    updateChartOptions() {
      this.chart.setOption(this.options);
    },
    // 新增methods
    resizeChart() {
      if (this.chart) {
        this.chart.resize(); // 调整图表大小
      }
    }
  }
};
</script>
<style scoped>
::v-deep .el-slider__button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sliderDiv {
  width: 80vw;
  margin-left: 5vw;
}

.selectedOutgasBtn {
  /* background: #ec4343; */
  background: #6da3f9;
  border-radius: 20px;
  width: 100%;
  height: 40px;
  color: #fff !important;
}

.notSelectedOutgasBtn {
  border-radius: 20px;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #959595;
}

.outgasBtnText {
  font-size: 20px;
  align-content: center;
  text-align: center;
}

.bottomDiv {
  position: absolute;
  bottom: 0rem;
  height: 40vh;
  width: 90vw;
  /* width: 335px; */
  background: #fff;
  padding: 20px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
}

::v-deep .el-slider {
  background: linear-gradient(to right,
      #f9fafa 0%,
      /* 浅蓝色最轻 */
      #eef3f9 3%,
      /* 浅蓝色最重，至10%结束 */
      #fafafa 3%,
      /* 中间颜色保持一致 */
      #fafafa 15%,
      /* 中间颜色保持一致 */
      #faefe1 15%,
      /* 右侧浅橙色最重 */
      #fafaf9 100%
      /* 右侧浅橙色最轻 */
    );
}

::v-deep .el-slider__bar {
  background-color: transparent;
}

/* 滑块颜色 */
::v-deep .el-slider__button {
  margin-bottom: 4px;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  border: 5px solid #007bff;
  background: #ffffff;
}

::v-deep .el-slider__stop {
  background: #6aacf4;
  margin-top: -5px;
  width: 12px;
  height: 12px;
  border-radius: 0;
}

/* 滑动轨颜色 */
::v-deep .el-slider__runway {
  -webkit-appearance: none;
  height: 1px;
  background: transparent;
  border: none;
  background: repeating-linear-gradient(to right,
      #71b3f3,
      #71b3f3 2px,
      transparent 1px,
      transparent 3px);
  outline: none;
}

::v-deep .el-slider__marks-text {
  font-size: 12px;
}
</style>
